<template>
  <!-- 组件配置预览[暂未实现] -->
  <el-dialog title="组件整体配置预览" :close-on-click-modal="false" width="570px" :visible.sync="visible" append-to-body   custom-class="custom-dialog-center-title"
>
    <div>
      <div class="bg-phone" v-if="
        this.widge.widgetSize == 'larege' || this.widge.widgetSize == 'small'
      ">
        <!-- 小组件 start -->
        <div style="padding: 69px 33px;" v-if="this.widge.widgetSize == 'small'">
          <div class="bg-phone-content" style="text-align: left;">
            <!-- image  /1.8-->
            <!-- * 3 / 4 * 72 / 96 -->
            <img :src="this.widge.image" :style="'border-radius: 25px;width:' +
              (this.widgeConfigList[0].canvasW * 216) / 384 +
              'px;height:' +
              (this.widgeConfigList[0].canvasH * 216) / 384 +
              'px;text-align:left'
              " />
            <div v-for="item in widgeConfigList" :key="item.id" :style="'text-align:' +
              item.textAlign +
              ';width:' +
              (item.elementW * 216) / 384 +
              'px;position: absolute;color:#' +
              item.fontColor +
              ';height:' +
              (item.elementH * 216) / 384 +
              'px;left:' +
              (item.elementX * 216) / 384 +
              'px;top:' +
              (item.elementY * 216) / 384 +
              'px;font-family:' +
              item.fontName +
              ';line-height:100%;'
              ">
              <!-- width:' + item.elementW /1.8 + 'px; -->
              <img v-if="item.element == 2||item.element == 9" :src="item.image" :style="'margin-top:0px;height:' + (item.elementH * 216) / 384 + 'px'
                " />
              <span :style="'font-size:' +
                (item.fontSize * 72) / 96 +
                'px;color:#' +
                item.fontColor +
                ';letter-spacing:' +
                (item.spacings == 0 ? 0 : (item.spacings / 72) * 96) +
                'px;line-height:100%;'
                " v-else>{{ item.text }}</span>
            </div>
          </div>
        </div>
        <!-- 小组件 end -->
        <!-- 大组件 start -->
        <div style="padding: 293px 34px 0px 34px;" v-if="this.widge.widgetSize == 'larege'">
          <div class="bg-phone-content" style="text-align: left;">
            <!-- width:100%;height:auto 2.76-->
            <!-- image -->
            <img :src="this.widge.image" :style="'border-radius: 25px;width:' +
              (this.widgeConfigList[0].canvasW * 216) / 384 +
              'px;height:' +
              (this.widgeConfigList[0].canvasH * 216) / 384 +
              'px;text-align:left'
              " />
            <!-- width:' + item.elementW /2 + 'px; -->
            <div v-for="item in widgeConfigList" :key="item.id" :style="'text-align:' +
              item.textAlign +
              ';width:' +
              (item.elementW * 216) / 384 +
              'px;position: absolute;color:#' +
              item.fontColor +
              ';height:' +
              (item.elementH * 216) / 384 +
              'px;left:' +
              (item.elementX * 216) / 384 +
              'px;top:' +
              (item.element == 2
                ? (item.elementY * 423) / 752 +
                (item.elementH * 216) / 384 / 5
                : (item.elementY * 423) / 752) +
              'px;font-family:' +
              item.fontName +
              ';line-height:100%;'
              ">
              <img v-if="item.element == 2||item.element == 9" :src="item.image" :style="'margin-top:0px;height:' + (item.elementH * 216) / 384 + 'px'
                " />
              <span :style="'font-size:' +
                (item.fontSize / 3) * 4 +
                'px;color:#' +
                item.fontColor +
                ';letter-spacing:' +
                (item.spacings == 0 ? 0 : (item.spacings / 3) * 4 - 2) +
                'px;line-height:100%;'
                " v-else>{{ item.text }}</span>
            </div>
          </div>
        </div>
        <!-- 大组件 end -->
      </div>
      <!-- 中组件 start -->
      <div class="bg-phone1" v-else>
        <div style="padding: 525px 34px 0px 32px;">
          <div class="bg-phone-content" style="text-align: left;">
            <!-- width:100%;height:auto 2.76-->
            <!-- image -->
            <img :src="this.widge.image" :style="'border-radius: 25px;width:' +
              (this.widgeConfigList[0].canvasW * 216) / 384 +
              'px;height:' +
              (this.widgeConfigList[0].canvasH * 216) / 384 +
              'px;text-align:left'
              " />
            <!-- width:' + item.elementW /1.8 + 'px; -->
            <div v-for="item in widgeConfigList" :key="item.id">
              <div :style="'text-align:' +
                item.textAlign +
                ';width:' +
                (item.elementW * 216) / 384 +
                'px;position: absolute;color:#' +
                item.fontColor +
                ';height:' +
                (item.elementH * 216) / 384 +
                'px;left:' +
                (item.elementX * 216) / 384 +
                'px;top:' +
                (item.elementY * 216) / 384 +
                'px;font-family:' +
                item.fontName +
                ';line-height:100%;'
                ">
                <img v-if="item.element == 2||item.element == 9" :src="item.image" :style="'margin-top:0px;height:' +
                  (item.elementH * 216) / 384 +
                  'px'
                  " />
                <span :style="'font-size:' +
                  (item.fontSize * 72) / 96 +
                  'px;color:#' +
                  item.fontColor +
                  ';letter-spacing:' +
                  (item.spacings == 0 ? 0 : (item.spacings / 72) * 96 - 2) +
                  'px;line-height:100%;'
                  " v-else>{{ item.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中组件 end -->
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0
      },
      widge: {},
      widgeConfigList: {},
      widgeConfig: {}
    };
  },
  methods: {
    init(id) {
      this.visible = true;
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl(`/widge/widge-config/list`),
          method: "get",
          params: this.$http.adornParams({
            page: 1,
            limit: 10000,
            widgeId: id
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.widgeConfigList = data.page.list;
            this.getWidgeInfo(this.widgeConfigList[0].widgeId);
          }
        });
      });
    },
    getWidgeInfo(widgeId) {
      this.$http({
        url: this.$http.adornUrl(`/widge/widge/info/${widgeId}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.widge = data.widge;
        }
      });
    }
  }
};
</script>
<style scoped>
.center {
  margin: 0 auto;
  text-align: center;
}

.bg-phone {
  background: url("../../../assets/img/bg-phone.png") no-repeat;
  background-size: 100%;
  /* width: 360px;
  height: 710px; */
  width: 525px;
  height: 1080px;
  padding: 50px 30px 30px 30px;
  margin: 0 auto;
}

.bg-phone1 {
  background: url("../../../assets/img/bg-phone1.png") no-repeat;
  background-size: 100%;
  /* width: 360px;
  height: 710px; */
  width: 525px;
  height: 1080px;
  padding: 50px 30px 30px 30px;
  margin: 0 auto;
}

.bg-phone-content {
  height: 560px;
  border-radius: 5px;
  position: relative;
}
/* 只将具有 custom-dialog-center-title 类的弹窗标题居中 */
.custom-dialog-center-title .el-dialog__title {

  margin-left: 200px;
}

</style>
